<template>
  <div class="blackView">
    <Map
      v-if="laneMsgControl"
      :load="getMap1Area"
      :map-center="mapsCenterWkt"
      :zoom="13.15"
      class="blackView"
    ></Map>
    <!-- <div>
      <LeftTip :act="4" :tab="4"></LeftTip>
    </div> -->
    <div class="infoWindow" v-show="showInfowindow">
      <div class="topTitle">
        <span class="fileName">{{ fileName }}</span>
        <span class="closeInfoWindow" @click="closeInfowindow">+</span>
      </div>
      <div class="windowBody">
        <div class="bodySelect">
          <div
            :class="[{ open: openIcon }, `${select == 1 ? 'isSelect' : ''}`]"
            style="position: relative"
            @click="selectFast(1)"
          >
            <el-select
              class="invert"
              popper-class="poprerInvert"
              v-model="value"
              placeholder="交通量调查"
              @change="openTrue"
              @visible-change="setSelect"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <i
              :class="`el-icon-caret-bottom open-icon ${
                select == 1 ? 'selectIcon' : ''
              }`"
              @click="openTrue"
            ></i>
          </div>
          <!-- <div
            :class="`${select == 2 ? 'isSelectSed' : ''} notSelect`"
            @click="selectFast(2)"
          >
            节点
          </div> -->
          <div v-for="(item, index) in setInfo"
            :key="index"
            :class="`${selectType == item.indef ? 'isSelectSed' : ''} notSelect`"
            @click="selectPoint(item)"
          >
          <span>节点{{ item.indef }}</span>
          </div>
        </div>
        <div class="satus_left" v-show="select == 1">
          <div class="imgBox">
            <video class="video" :src="src" disablePictureInPicture controlslist="nodownload noremoteplayback noplaybackrate" controls></video>
          </div>
          <div
            class="rightCanvas"
          >
            <div class="canvasBox">
              <canvas
                ref="roadCanvas"
                :width="leftWidth" :height="leftWidth"
              ></canvas>
            </div>
          </div>
        </div>
        <div class="satus_right" v-show="select >= 2">
          <!-- <el-form>
            <el-form-item label="">
              <el-radio-group class="elGroup" v-model="tabPosition" @change="getSelList">
                <el-radio-button v-for="item in setInfo" :key="item.picture" :label="item.indef">
                  <span>节点{{ item.indef }}</span>
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form> -->
          <div class="proment">
            <el-button :class="`proOne ${showType == 1 ? 'activeButton' : ''}`" type="primary" @click="getSelItem(1)">现状与问题</el-button>
            <el-button :class="`proTwo ${showType == 2 ? 'activeButton' : ''}`" type="primary" @click="getSelItem(2)">措施与效果</el-button>
          </div>
          <div class="ProNow" v-show="showType == 1">
            <p class="promentNowTitle">现状</p>
            <span class="promentNowCon">{{ promentNowCon }}</span>
            <p class="promentNowCen">问题</p>
            <span class="promentNowSec">{{ promentNowSec }}</span>
            <el-image
              v-if="srcTypeOne"
              :src="srcTypeOne"
              class="arroundTypeOne"
              :preview-src-list="srcTypeList"
              ref="previewImg"
              :preview-teleported="true"
              @error="showErrorImg"
              >
            </el-image>
          </div>
          <div class="stbox" v-show="showType == 2">
            <div class="imgBox">
              <el-image
                v-if="srcImg"
                :src="srcImg"
                class="arroundImg"
                :preview-src-list="srcList"
                ref="previewImg"
                :preview-teleported="true"
                @error="showErrorImg"
                >
              </el-image>
              <!-- <el-image
                v-for="(image, index) in imageList"
                :key="index"
                class="arroundImg"
                :src="image.url"
                :preview-src-list="imageList.map(img => img.url)"
                @error="showErrorImg"
              ></el-image> -->
              <!-- <i @click="allSelect" class="el-icon-full-screen"></i> -->
            </div>
            <div class="rightInfo">
              <p style="margin: 6px 0 12px -3px; font-size: 18px;">改善方案</p>
              <span>{{ drtMess }}</span>
              <p style="margin: 40px 0 16px -3px; font-size: 18px;">改善效果</p>
              <span v-html="drtRes"></span>
            </div>
              <!-- <div v-show="showType == 1" class="showRea" style="width: 433; height: 433"> -->
                <!-- <div> -->
                  <!-- <MyReactComponent
                    ref="reactCom"
                    :data="{ width: 433, height: 433, zoom: 0.25, data: crossFormData }"
                  /> -->
                <!-- </div> -->
              <!-- </div> -->
              <!-- <div class="rightInfo">
                <p style="margin-bottom: 6px;">改善方案</p>
                {{ message }}
              </div> -->
            </div>
        </div>
      </div>
    </div>
    <div class="sample">
      <p class="sample-title">施工批次</p>
      <div class="sample-box">
        <div class="box-left" :class="showOne ? 'box-left-active' : ''" @click="clickNumOne">
          <div class="sample-left-name">第一批施工</div>
          <div><span  class="sample-left-num">{{ numOne }}</span>个</div>
        </div>
        <div class="box-right" :class="showTwo ? 'box-right-active' : ''" @click="clickNumTwo">
          <div class="sample-right-name">第二批施工</div>
          <div><span class="sample-right-num">{{ numTwo }}</span>个</div>
        </div>
      </div>
      <p class="sample-center">施工种类</p>
      <div class="sample-box">
        <div class="box-left" :class="showThree ? 'box-center-active' : ''" @click="clickNumThree">
          <div class="sample-left-name">交通改造</div>
          <div><span  class="sample-left-num">{{ numThree }}</span>个</div>
        </div>
        <div class="box-right" :class="showFour ? 'box-bottom-active' : ''" @click="clickNumFour">
          <div class="sample-right-name">设施提升</div>
          <div><span class="sample-right-num">{{ numFour }}</span>个</div>
        </div>
      </div>
    </div>
    <div class="example">
      <p>图例</p>
      <div class="box">
        <div class="colorBox colorRed"></div>
        <div>优化断点</div>
      </div>
      <div class="box">
        <div class="colorBox colorGre"></div>
        <div>强化替代道路</div>
      </div>
      <div class="box">
        <div class="colorBox colorYel"></div>
        <div>提升分流道路</div>
      </div>
    </div>
    <!-- <div :class="select == 2 ? 'showReactTop' : 'showReactBot'"> -->
      <!-- <div v-if="showType == 1" class="showReacts" :class="select == 2 ? 'showReactTop' : 'showReactBot'">
        <MyReactComponent
          ref="reactCom"
          :data="{ width: 433, height: 433, zoom: 0.5, data: crossFormData }"
        />
      </div> -->
    <!-- </div> -->
  </div>
</template>

<script>
import Map from "@/components/map1.vue";
import LeftTip from "./tab/leftTip.vue";
import MyReactComponent from "./tab/index.jsx";
import { ReactWrapper } from "vuera";
import { getCrossWkt, getCrossCanalPicture, getTurnFlow, getInterInfoByType, getVedioByType } from "@/api/api.js";
export default {
  name: "cross",
  components: {
    Map,
    LeftTip,
    react: ReactWrapper,
    MyReactComponent,
  },
  data() {
    return {
      showOne: true,
      showTwo: true,
      showThree: true,
      showFour: true,
      numOne: null,
      numTwo: null,
      numThree: null,
      numFour: null,
      imageList: [
        { url: 'http://47.100.163.226:37001/w6.png' },
        { url: 'http://47.100.163.226:37001/w7.png' },
        { url: 'http://47.100.163.226:37001/w8.png' },
      ],
      showReact: false,
      mapsCenterWkt: [120.232885,30.254501],
      laneMsgControl: true,
      removeMarkers: [],
      crossFormData: {
        streets: [],
      },
      select: 1,
      point: null,
      value: "1",
      options: [
        {
          value: "1",
          label: "早高峰",
        },
        {
          value: "2",
          label: "晚高峰",
        },
      ],
      openIcon: false,
      leftWidth: 0,
      showInfowindow: false,
      sum: null,
      east: null,
      north: null,
      west: null,
      north: null,
      src: '',
      srcImg: '',
      interId: '',
      message: '',
      showType: 1,
      showEast: true,
      showSouth: true,
      showWest: true,
      showNorth: true,
      infoWindow: null,
      fileName: '',
      srcList: [],
      tabPosition: '0',
      setInfo: [],
      pointList: [],
      firstList: [],
      secondList: [],
      activeButton: 0,
      selectType: 0,
      promentNowCon: '',
      promentNowSec: '',
      promentNowImg: '',
      srcTypeOne: '',
      srcTypeList: [],
      drtMess: '',
      drtRes: '',
    };
  },
  created() {
  },
  mounted() {
    
  },

  methods: {
    openTrue(val) {
      console.log('切换', val)
      this.select = 1;
      this.getTurnFlowHours(this.interId)
      this.getVideo(this.interId)
    },
    selectFast(type) {
      console.log('下拉', type)
      if(type == 1){
        this.showReact = false
        this.select = 1
      } else if(type == 2){
        // this.value = "1"
        if(this.showType == 1){
          this.showReact = true   
        } else {
          this.showReact = false
        }
        this.select = 2
      }
    },
    selectPoint(item){
      this.select = Number(item.indef) + 1
      this.selectType = item.indef
      console.log(item)
      this.drtMess = item.gscs
      this.drtRes = item.gsxg.replaceAll('\r\n', '<br>')
      this.promentNowCon = item.xz
      this.promentNowSec = item.wt
      this.srcTypeOne = item.sjzc
      this.srcTypeList = [item.sjzc]
      this.srcImg = item.picture
      this.srcList = [item.picture]
    },
    setSelect(flag){
      this.select = 1
      this.selectType = 0
      this.openIcon = flag
    },
    getMap1Area() {
      this.getPointData();
    },
    async getPointData() {
      let res = await getCrossWkt();
      if (res.data.data && res.data.data.length) {
        let arr = [], trr = []
        res.data.data.forEach(item => {
          if(item.batch == 1){
            arr.push(item)
          }
          if(item.batch == 2){
            trr.push(item)
          }
        })
        this.firstList = arr
        this.secondList = trr
        this.numOne = this.firstList.length
        this.numTwo = this.secondList.length
        this.setNum()
        this.pointList = res.data.data
        this.setPoint(res.data.data);
      }
    },
    setPoint(data) {
      if (window.location.href.indexOf("cross") == "-1") return;
      data.forEach((item, index) => {
        let centerWkt = item.wkt.split(",");
        let marker = new AMap.Marker({
          position: new AMap.LngLat(centerWkt[0], centerWkt[1]),
          content: this.getCrossDisInfoMarkerIcon(index, item.color_type, item),
          offset: new AMap.Pixel(-10, -10),
        });
        window.map1.add(marker);
        this.removeMarkers.push(marker);
      });
    },
    removeMarker(){
      if(this.removeMarkers.length){
        this.removeMarkers.forEach(item => {
          window.map1.remove(item)
        })
      }
    },
    getCrossDisInfoMarkerIcon(index, type, item) {
      let crossClass = "";
      switch (type) {
        case 1:
          crossClass = "crossAreaA";
          break;
        case 2:
          crossClass = "crossAreaB";
          break;
        case 3:
          crossClass = "crossAreaC";
          break;
      }
      let el = document.createElement("div");
      // el.className = `crossArea ${crossClass}`;
      // el.innerHTML = '+'
      el.className = `crossBox ${crossClass}`;
      el.tabIndex = index;
      el.addEventListener("click", (e) => {
        // this.showType = item.type
        this.crossFormData.streets = []
        if(this.showType == 1){
          // getCrossCanalPicture({ id: item.id}).then(res => {
          //   const list = res.data.data
          //   this.crossFormData.streets = list || []
          // })
        }
        this.fileName = item.name
        this.showInfo(item);
      });
      el.addEventListener('mouseenter', this.debounce(
        ()=> {
          this.infoWindow && this.infoWindow.close()
          let wkt = item.wkt.split(',')
          if(item.name){
            let infoWindowContent = `<div class="input-item">${item.name}</div>`
            this.infoWindow = new AMap.InfoWindow({
            // anchor: 'center',
              position: new AMap.LngLat(wkt[0], wkt[1]),
              offset: new AMap.Pixel(10, -40),
              content: infoWindowContent
            })
            this.infoWindow.open(window.map1)
          }
        }, 200)
      )
      el.addEventListener('mouseout', this.debounce(() => {
        this.infoWindow && this.infoWindow.close()
      }, 200))
      // el.innerHTML = `<div class="crossAreaText">${item.volume}</div>`;
      el.id = `id_${index}`;
      return el;
    },
    debounce(func, wait) {
      let timeout;
      return function() {
        const context = this;
        const args = arguments;
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
          func.apply(context, args);
        }, wait);
      };
    },
    showInfo(item) {
      this.select = 1;
      this.value = "1";
      this.interId = item.id
      this.srcList = []
      this.srcImg = ''
      this.drtMess = ''
      this.drtRes = ''
      this.promentNowCon = ''
      this.promentNowSec = ''
      this.srcTypeOne = ''
      this.srcTypeList = []
      // this.message = ''
      // this.activeButton = 1
      this.tabPosition = '0'
      this.$nextTick(() => {
        this.leftWidth = document.querySelector(".imgBox").clientWidth
      })
      if (window.map1) {
        window.map1.on("click", this.closeInfowindow);
      }
      this.getTurnFlowHours(this.interId)
      this.getInterInfo()
      this.getVideo(this.interId)
      this.showInfowindow = true;
    },
    getVideo(id){
      getVedioByType({id: id, type: this.value}).then(res => {
        if(res.data.data){
          this.src = window.CONFIG.servelUrl + 'qianjiang_rid/' + res.data.data.video_url
          console.log('视频链接', this.src)
        }
      })
    },
    getInterInfo(){
      getInterInfoByType({id: this.interId, type: 2 }).then(res => {
        if(res.data.data && res.data.data.length){
          // this.setInfo = res.data.data
          let setInfo = []
          res.data.data.forEach((item, ins) =>{
            setInfo.push({
              picture: item.picture ? window.CONFIG.baseUrl + item.picture : '',
              // message: item.scheme,
              gscs: item.gscs,
              gsxg: item.gsxg,
              sjzc: item.sjzc ? window.CONFIG.baseUrl + item.sjzc : '',
              xz: item.xz,
              wt: item.wt,
              indef: String(ins + 1)
            })
          })
          this.setInfo = setInfo
          // this.srcList = [this.setInfo[0].picture]
          // this.srcImg = this.setInfo[0].picture
          // this.message = this.setInfo[0].message
          console.log(999, this.srcList, this.message, this.setInfo)
          this.tabPosition = '1'
        }else {
          this.setInfo = []
          this.srcList = []
          this.srcImg = ''
          this.message = ''
        }     
      })
    },
    closeInfowindow() {
      this.showInfowindow = false
      this.src = ''
      this.select = 0
      this.showType = 1
      // this.activeButton = 1
      this.selectType = 0
      window.map1.off("click", this.closeInfoWindow)
    },
    // allSelect(){
    //   this.srcList = [this.srcImg]
    //   this.$refs.previewImg.showViewer = true
    //   console.log(this.$refs.previewImg)
    //   this.$refs.previewImg.children[0].click()
    //   this.srcList = []
    // },
    showErrorImg(e){
      this.$nextTick(() => {
        document.querySelector('.el-image__error').innerHTML = '无'
      })
    },
    clickNumOne(){
      this.showOne = !this.showOne
      this.removeMarker()
      this.setNum()
      this.setChangePoint()
    },
    clickNumTwo(){
      this.showTwo = !this.showTwo
      this.removeMarker()
      this.setNum()
      this.setChangePoint()
    },
    clickNumThree(){
      this.showThree = !this.showThree
      this.removeMarker()
      this.setNum()
      this.setChangePoint()
    },
    clickNumFour(){
      this.showFour = !this.showFour
      this.removeMarker()
      this.setNum()
      this.setChangePoint()
    },
    setNum(){
      let i = 0, j = 0
      if(this.showOne){
        this.firstList.forEach(item => {
          if(item.vehicle_type == 1){
            i++
          }
          if(item.vehicle_type == 2){
            j++
          }
        })
      }
      if(this.showTwo){
        this.secondList.forEach(item => {
          if(item.vehicle_type == 1){
            i++
          }
          if(item.vehicle_type == 2){
            j++
          }
        })
      }
      this.numThree = i
      this.numFour = j
    },
    setChangePoint(){
      let data = []
      if(this.showOne){
        if(this.showThree){
          this.pointList.forEach(item =>{
            if(item.batch == 1 && item.vehicle_type == 1){
              data.push(item)
            }
           })
        }
        if(this.showFour){
          this.pointList.forEach(item =>{
            if(item.batch == 1 && item.vehicle_type == 2){
              data.push(item)
            }
           })
        }
      }
      if(this.showTwo){
        if(this.showThree){
          this.pointList.forEach(item =>{
            if(item.batch == 2 && item.vehicle_type == 1){
              data.push(item)
            }
           })
        }
        if(this.showFour){
          this.pointList.forEach(item =>{
            if(item.batch == 2 && item.vehicle_type == 2){
              data.push(item)
            }
           })
        }
      }
      this.pointList.forEach(item => {
        if(item.batch == 0 || item.vehicle_type == 0){
          data.push(item)
        }
      })
      this.setPoint(data)
    },
    getTurnFlowHours(id){
      this.showEast = true
      this.showSouth = true
      this.showWest = true
      this.showNorth = true
      getTurnFlow({ id: id, type: this.value }).then(res=> {
        if(res.data.data && res.data.data.length > 0){
          let sum = res.data.data.map(item => {
            item.turnFlowArr.all = item.turnFlowArr.leftFlow + item.turnFlowArr.rightFlow + item.turnFlowArr.straightFlow
            return item
          })
          // res.data.data.forEach(item =>{
          //   if(item.dir4No == 4){
          //     if(item.is_existence == 0){
          //       this.showEast = false
          //     }
          //   }
          // })
          // res.data.data.forEach(item =>{
          //   if(item.dir4No == 1){
          //     if(item.is_existence == 0){
          //       this.showSouth = false
          //     }
          //   }
          // })
          // res.data.data.forEach(item =>{
          //   if(item.dir4No == 2){
          //     if(item.is_existence == 0){
          //       this.showWest = false
          //     }
          //   }
          // })
          // res.data.data.forEach(item =>{
          //   if(item.dir4No == 3){
          //     if(item.is_existence == 0){
          //       this.showNorth = false
          //     }
          //   }
          // })
          // console.log(this.showEast, this.showSouth, this.showWest, this.showNorth)
          let east = sum.find(item => {
            return item.dir4No == 4
          })
          let south = sum.find(item => {
            return item.dir4No == 1
          })
          let west = sum.find(item => {
            return item.dir4No == 2
          })
          let north = sum.find(item => {
            return item.dir4No == 3
          })
          east.turnFlowArr.add = south.turnFlowArr.rightFlow + west.turnFlowArr.straightFlow + north.turnFlowArr.leftFlow
          south.turnFlowArr.add = west.turnFlowArr.rightFlow + north.turnFlowArr.straightFlow + east.turnFlowArr.leftFlow
          west.turnFlowArr.add = north.turnFlowArr.rightFlow + east.turnFlowArr.straightFlow + south.turnFlowArr.leftFlow
          north.turnFlowArr.add = east.turnFlowArr.rightFlow + south.turnFlowArr.straightFlow + west.turnFlowArr.leftFlow
          this.sum = sum
          this.east = east
          this.south = south
          this.west = west
          this.north = north
          this.updateScreen()
          this.updateScreenData()
        } else {
          this.updateScreen()
        }
      })
    },
    updateScreen() {
      let sum = this.sum
      let east = this.east
      let west = this.west
      let north = this.north
      let south = this.south 
      let canvas
      let fillStyle
      canvas = this.$refs.roadCanvas;
      fillStyle = 'rgba(12, 36, 66, 0.8)'
      const ctx = canvas.getContext("2d");

      const PI = Math.PI
      const rate = document.querySelector('.imgBox').clientWidth / 7
      // console.log('流量图比例', rate)
      var width = canvas.width;
      var height = canvas.height;
      ctx.clearRect(0, 0, width, height)

      ctx.fillStyle = fillStyle;
      ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制背景颜色

      // 小圆弧
      let eastSmallRightWidth
      let southSmallRightWidth
      let westSmallRightWidth
      let northSmallRightWidth
      // 大圆弧
      let eastBigRightWidth
      let southBigRightWidth
      let westBigRightWidth
      let northBigRightWidth
      // 直线
      let eastStrRightWidth
      let southStrRightWidth
      let westStrRightWidth
      let northStrRightWidth

      if(sum){
        let arr = []
        sum.forEach(item => {
          arr.push(item.turnFlowArr.leftFlow, item.turnFlowArr.straightFlow, item.turnFlowArr.rightFlow)
        })
        let max = Math.max(...arr)
        let min = Math.min(...arr)
        let filts = (max - min) / 5
        let flestrr = [min, min+filts, min+filts*2, min+filts*3, min+filts*4, max]
        eastSmallRightWidth = this.getLineWidth(flestrr, east.turnFlowArr.rightFlow)
        southSmallRightWidth = this.getLineWidth(flestrr, south.turnFlowArr.rightFlow)
        westSmallRightWidth = this.getLineWidth(flestrr, west.turnFlowArr.rightFlow)
        northSmallRightWidth = this.getLineWidth(flestrr, north.turnFlowArr.rightFlow)

        eastBigRightWidth = this.getLineWidth(flestrr, east.turnFlowArr.leftFlow)
        southBigRightWidth = this.getLineWidth(flestrr, south.turnFlowArr.leftFlow)
        westBigRightWidth = this.getLineWidth(flestrr, west.turnFlowArr.leftFlow)
        northBigRightWidth = this.getLineWidth(flestrr, north.turnFlowArr.leftFlow)

        eastStrRightWidth = this.getLineWidth(flestrr, east.turnFlowArr.straightFlow)
        southStrRightWidth = this.getLineWidth(flestrr, south.turnFlowArr.straightFlow)
        westStrRightWidth = this.getLineWidth(flestrr, west.turnFlowArr.straightFlow)
        northStrRightWidth = this.getLineWidth(flestrr, north.turnFlowArr.straightFlow)
      }
// 直线
      if(this.showSouth){
        // 南
        ctx.beginPath()
        ctx.moveTo(4 * rate, 6 * rate)
        ctx.lineTo(4 * rate, 2 * rate)
        ctx.lineWidth = southStrRightWidth ? southStrRightWidth : 4
        ctx.strokeStyle = 'rgb(0, 175, 80)'
        ctx.stroke()
      }
      if(this.showWest){
        // 西
        ctx.beginPath()
        ctx.moveTo(rate, 4 * rate)
        ctx.lineTo(5 * rate, 4 * rate)
        ctx.lineWidth = westStrRightWidth ? westStrRightWidth : 4
        ctx.strokeStyle = 'rgb(90, 70, 189)'
        ctx.stroke()
      }
      if(this.showNorth){
        // 北
        ctx.beginPath()
        ctx.moveTo(3 * rate, rate)
        ctx.lineTo(3 * rate, 5 * rate)
        ctx.lineWidth = northStrRightWidth ? northStrRightWidth : 4
        ctx.strokeStyle = 'rgb(229, 0, 4)'
        ctx.stroke()
      }
      if(this.showEast){
        // 东
        ctx.beginPath()
        ctx.moveTo(6 * rate, 3 * rate)
        ctx.lineTo(2 *rate, 3 * rate)
        ctx.lineWidth = eastStrRightWidth ? eastStrRightWidth : 4
        ctx.strokeStyle = 'rgb(254, 132, 0)'
        ctx.stroke()
      }
// 小圆弧
      if(this.showEast){
        if(this.showNorth){
          // 东
          ctx.beginPath()
          ctx.arc(5 * rate, 2 * rate, rate, 0.5 * PI, PI)
          ctx.lineWidth = eastSmallRightWidth ? eastSmallRightWidth : 4
          ctx.strokeStyle = 'rgb(254, 132, 0)'
          ctx.stroke()
        }
        if(this.showSouth){
          // 南
          ctx.beginPath()
          ctx.arc(5 * rate, 5 * rate, rate, PI, 1.5 * PI)
          ctx.lineWidth = southSmallRightWidth ? southSmallRightWidth : 4
          ctx.strokeStyle = 'rgb(0, 175, 80)'
          ctx.stroke()
        }
      }
      if(this.showSouth){
        if(this.showEast){
          // 南
          ctx.beginPath()
          ctx.arc(5 * rate, 5 * rate, rate, PI, 1.5 * PI)
          ctx.lineWidth = southSmallRightWidth ? southSmallRightWidth : 4
          ctx.strokeStyle = 'rgb(0, 175, 80)'
          ctx.stroke()
        }
        if(this.showWest){
          // 西
          ctx.beginPath()
          ctx.arc(2 * rate, 5 * rate, rate, 1.5 * PI, 0)
          ctx.lineWidth = westSmallRightWidth ? westSmallRightWidth : 4
          ctx.strokeStyle = 'rgb(90, 70, 189)'
          ctx.stroke()
        }
      }
      if(this.showWest){
        if(this.showSouth){
          // 西
          ctx.beginPath()
          ctx.arc(2 * rate, 5 * rate, rate, 1.5 * PI, 0)
          ctx.lineWidth = westSmallRightWidth ? westSmallRightWidth : 4
          ctx.strokeStyle = 'rgb(90, 70, 189)'
          ctx.stroke()
        }
        if(this.showNorth){
          // 北
          ctx.beginPath()
          ctx.arc(2 * rate, 2 * rate, rate, 0, 0.5 * PI)
          ctx.lineWidth = northSmallRightWidth ? northSmallRightWidth : 4
          ctx.strokeStyle = 'rgb(229, 0, 4)'
          ctx.stroke()
        }
      }
      if(this.showNorth){
        if(this.showWest){
          // 北
          ctx.beginPath()
          ctx.arc(2 * rate, 2 * rate, rate, 0, 0.5 * PI)
          ctx.lineWidth = northSmallRightWidth ? northSmallRightWidth : 4
          ctx.strokeStyle = 'rgb(229, 0, 4)'
          ctx.stroke()
        }
        // 东
        if(this.showEast){
          ctx.beginPath()
          ctx.arc(5 * rate, 2 * rate, rate, 0.5 * PI, PI)
          ctx.lineWidth = eastSmallRightWidth ? eastSmallRightWidth : 4
          ctx.strokeStyle = 'rgb(254, 132, 0)'
          ctx.stroke()
        }
      }
      
// 大圆弧
      if(this.showEast){
        if(this.showNorth){
          // 北
          ctx.beginPath()
          ctx.arc(5 * rate, 2 * rate, 2 * rate, 0.5 * PI, PI)
          ctx.lineWidth = northBigRightWidth ? northBigRightWidth : 4
          ctx.strokeStyle = 'rgb(229, 0, 4)'
          ctx.stroke()
        }
        if(this.showSouth){
          // 东
          ctx.beginPath()
          ctx.arc(5 * rate, 5 * rate, 2 * rate, PI, 1.5 * PI)
          ctx.lineWidth = eastBigRightWidth ? eastBigRightWidth : 4
          ctx.strokeStyle = 'rgb(254, 132, 0)'
          ctx.stroke()
        }
      }
      if(this.showSouth){
        if(this.showEast){
          // 东
          ctx.beginPath()
          ctx.arc(5 * rate, 5 * rate, 2 * rate, PI, 1.5 * PI)
          ctx.lineWidth = eastBigRightWidth ? eastBigRightWidth : 4
          ctx.strokeStyle = 'rgb(254, 132, 0)'
          ctx.stroke()
        }
        if(this.showWest){
          // 南
          ctx.beginPath()
          ctx.arc(2 * rate, 5 * rate, 2 * rate, 1.5 * PI, 0)
          ctx.lineWidth = southBigRightWidth ? southBigRightWidth : 4
          ctx.strokeStyle = 'rgb(0, 175, 80)'
          ctx.stroke()
        }
      }
      if(this.showWest){
        if(this.showSouth){
          // 南
          ctx.beginPath()
          ctx.arc(2 * rate, 5 * rate, 2 * rate, 1.5 * PI, 0)
          ctx.lineWidth = southBigRightWidth ? southBigRightWidth : 4
          ctx.strokeStyle = 'rgb(0, 175, 80)'
          ctx.stroke()
        }
        if(this.showNorth){
          // 西
          ctx.beginPath()
          ctx.arc(2 * rate, 2 * rate, 2 * rate, 0, 0.5 * PI)
          ctx.lineWidth = westBigRightWidth ? westBigRightWidth : 4
          ctx.strokeStyle = 'rgb(90, 70, 189)'
          ctx.stroke()
        }
      }
      if(this.showNorth){
        if(this.showWest){
          // 西
          ctx.beginPath()
          ctx.arc(2 * rate, 2 * rate, 2 * rate, 0, 0.5 * PI)
          ctx.lineWidth = westBigRightWidth ? westBigRightWidth : 4
          ctx.strokeStyle = 'rgb(90, 70, 189)'
          ctx.stroke()
        }
        if(this.showEast){
          // 北
          ctx.beginPath()
          ctx.arc(5 * rate, 2 * rate, 2 * rate, 0.5 * PI, PI)
          ctx.lineWidth = northBigRightWidth ? northBigRightWidth : 4
          ctx.strokeStyle = 'rgb(229, 0, 4)'
          ctx.stroke()
        }
        
      }

// 三角
      if(this.showSouth){
        // 南
        ctx.beginPath()
        ctx.strokeStyle = 'rgb(0, 175, 80)'
        ctx.moveTo(3 * rate + 4, 5 * rate)
        ctx.lineTo(3 * rate - 4, 5 * rate)
        ctx.lineTo(3 * rate - 4, 6 * rate - 20)
        ctx.lineTo(3 * rate - 10, 6 * rate - 20)
        ctx.lineTo(3 * rate, 6 * rate - 4)
        ctx.lineTo(3 * rate + 10, 6 * rate - 20)
        ctx.lineTo(3 * rate + 4, 6 * rate - 20)
        ctx.fillStyle = 'rgb(0, 175, 80)'
        ctx.fill()
        ctx.stroke()
      }
      if(this.showWest){
        // // 西
        ctx.beginPath()
        ctx.strokeStyle = 'rgb(90, 70, 189)'
        ctx.moveTo(2 * rate, 3 * rate + 4)
        ctx.lineTo(2 * rate, 3 * rate - 4)
        ctx.lineTo(rate + 20, 3 * rate - 4)
        ctx.lineTo(rate + 20, 3 * rate - 10)
        ctx.lineTo(rate + 4, 3 * rate)
        ctx.lineTo(rate + 20, 3 * rate + 10)
        ctx.lineTo(rate + 20, 3 * rate + 4)
        ctx.fillStyle = 'rgb(90, 70, 189)'
        ctx.fill()
        ctx.stroke()
      }
      if(this.showNorth){
        // // 北
        ctx.beginPath()
        ctx.strokeStyle = 'rgb(229, 0, 4)'
        ctx.moveTo(4 * rate - 4, 2 * rate)
        ctx.lineTo(4 * rate + 4, 2 * rate)
        ctx.lineTo(4 * rate + 4, rate + 20)
        ctx.lineTo(4 * rate + 10, rate + 20)
        ctx.lineTo(4 * rate, rate + 4)
        ctx.lineTo(4 * rate - 10, rate + 20)
        ctx.lineTo(4 * rate - 4, rate + 20)
        ctx.fillStyle = 'rgb(229, 0, 4)'
        ctx.fill()
        ctx.stroke()
      }
      if(this.showEast){
        // // 东
        ctx.beginPath()
        ctx.strokeStyle = 'rgb(254, 132, 0)'
        ctx.moveTo(5 * rate, 4 * rate - 4)
        ctx.lineTo(5 * rate, 4 * rate + 4)
        ctx.lineTo(6 * rate - 20, 4 * rate + 4)
        ctx.lineTo(6 * rate - 20, 4 * rate + 10)
        ctx.lineTo(6 * rate - 4, 4 * rate)
        ctx.lineTo(6 * rate - 20, 4 * rate - 10)
        ctx.lineTo(6 * rate - 20, 4 * rate - 4)
        // ctx.lineTo(164, 4 * rate);
        ctx.fillStyle = 'rgb(254, 132, 0)'
        ctx.fill()
        ctx.stroke()
      }
      
    },
    updateScreenData(){
      let east = this.east
      let west = this.west
      let north = this.north
      let south = this.south
      if(east && south && west && north){
        let canvas
        let fillStyle
        canvas = this.$refs.roadCanvas;
        fillStyle = '#FFF'
        const ctx = canvas.getContext("2d");
        const rate = document.querySelector('.imgBox').clientWidth / 7
// 路名
        ctx.fillStyle = fillStyle;
        ctx.font = "12px Verdana"
        ctx.textAlign = 'center';
        if(this.showSouth){
          ctx.fillText(south.name, 3.5 * rate, 6.4 * rate) // 南路口
        }
        if(this.showNorth){
          ctx.fillText(north.name, 3.5 * rate, 0.6 * rate) // 北路口
        }
        if(this.showEast){
          ctx.fillText(east.name, 6.2 * rate, 3.6 * rate) // 东路口
        }
        if(this.showWest){
          ctx.fillText(west.name, 0.7 * rate, 3.6 * rate) // 西路口
        }

// 数字
        ctx.fontSize = '16px';
        ctx.fillStyle = fillStyle;
        ctx.textAlign = 'center';
        if(this.showSouth){
          ctx.fillText(south.turnFlowArr.all, 4 * rate, 5 * rate) // 南总1
          ctx.fillText(south.turnFlowArr.add, 3 * rate, 5 * rate) // 南总2
        }
        if(this.showWest){
          ctx.fillText(west.turnFlowArr.all, 2 * rate, 4 * rate) // 西总1
          ctx.fillText(west.turnFlowArr.add, 2 * rate, 3 * rate) // 西总2
        }
        if(this.showNorth){
          ctx.fillText(north.turnFlowArr.all, 3 * rate, 2 * rate) // 北总1
          ctx.fillText(north.turnFlowArr.add, 4 * rate, 2 * rate) // 北总2
        }
        if(this.showEast){
          ctx.fillText(east.turnFlowArr.all, 5 * rate, 3 * rate) // 东总1
          ctx.fillText(east.turnFlowArr.add, 5 * rate, 4 * rate) // 东总2
        }
        
        if(this.showEast){
          this.showNorth && ctx.fillText(north.turnFlowArr.leftFlow, 3.4 * rate, 2.5 * rate) // 北左
          this.showWest && ctx.fillText(east.turnFlowArr.straightFlow, 4.5 * rate, 3 * rate) // 东直
          this.showNorth && ctx.fillText(east.turnFlowArr.rightFlow, 4.5 * rate, 2.6 * rate) // 东右
        }
        if(this.showSouth){
          this.showEast && ctx.fillText(east.turnFlowArr.leftFlow, 4.5 * rate, 3.4 * rate) // 东左
          this.showNorth && ctx.fillText(south.turnFlowArr.straightFlow, 4 * rate, 4.5 * rate) // 南直
          this.showEast && ctx.fillText(south.turnFlowArr.rightFlow, 4.4 * rate, 4.5 * rate) // 南右
          
        }
        if(this.showWest){
          this.showSouth && ctx.fillText(south.turnFlowArr.leftFlow, 3.6 * rate, 4.5 * rate) // 南左
          this.showEast && ctx.fillText(west.turnFlowArr.straightFlow, 2.5 * rate, 4 * rate) // 西直
          this.showSouth && ctx.fillText(west.turnFlowArr.rightFlow, 2.5 * rate, 4.4 * rate) // 西右
        }
        if(this.showNorth){
          this.showWest && ctx.fillText(west.turnFlowArr.leftFlow, 2.5 * rate, 3.6 * rate) // 西左
          this.showSouth && ctx.fillText(north.turnFlowArr.straightFlow, 3 * rate, 2.5 * rate) // 北直
          this.showWest && ctx.fillText(north.turnFlowArr.rightFlow, 2.6 * rate, 2.5 * rate) // 北右
        }
        
      }
    },
    getLineWidth(flestrr, value){ // 区间值 当前值
      if(value == 0){
        return 3
      }
      if(value >= flestrr[0] && value < flestrr[1]){
        return 3
      } else if(value >= flestrr[1] && value < flestrr[2]){
        return 4
      } else if(value >= flestrr[2] && value < flestrr[3]){
        return 5
      } else if(value >= flestrr[3] && value < flestrr[4]){
        return 6
      } else if(value >= flestrr[4] && value <= flestrr[5]){
        return 7
      }
    },
    getSelList(){
      console.log(this.tabPosition)
      this.setInfo.forEach(item => {
        if(item.indef == this.tabPosition){
          this.srcList = [item.picture]
          this.srcImg = item.picture
          this.message = item.message
        }
      })
    },
    getSelItem(type){
      // this.activeButton = type
      this.showType = type
    }
  },
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.reactClose {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-block;
  font-size: 30px;
  line-height: 16px;
  color: #fad507;
  transform: rotate(45deg);
  cursor: pointer;
}
.channelMap {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -230px;
  margin-left: -450px;
  overflow: hidden;
  z-index: 100;
  // background: #CCC;
}
.infoWindow {
  position: fixed;
  // top: 200px;
  // left: 500px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 600px;
  z-index: 110;
  .topTitle {
    position: relative;
    height: 30px;
    background: linear-gradient(
      to bottom,
      rgba(11, 69, 138, 0.8) 5%,
      rgba(3, 77, 134, 0.8) 45%,
      rgba(16, 47, 88, 0.8) 55%,
      rgba(0, 44, 105, 0.8) 70%,
      rgba(6, 66, 115, 0.8) 90%,
      rgba(8, 105, 197, 0.8) 100%
    );
    .fileName{
      color: #FFF;
      display: inline-block;
      line-height: 30px;
      margin-left: 20px;
      font-size: 16px;
    }
    .closeInfoWindow {
      position: absolute;
      top: 6px;
      right: 6px;
      display: inline-block;
      font-size: 21px;
      line-height: 16px;
      color: #fff;
      transform: rotate(45deg);
      cursor: pointer;
    }
  }
  .windowBody {
    background: rgba(6, 15, 34, 0.8);
    height: calc(100% - 30px);
    padding: 12px 14px 8px 14px;
    box-sizing: border-box;
    .bodySelect {
      display: flex;
      & /deep/ .invert {
        width: 105px;
        padding: 0 6px 0 0;
        height: 30px;
        box-sizing: border-box;
        background: #1a4673;

        .el-input__suffix {
          display: none;
        }
        .el-input__inner::placeholder {
          color: #888;
        }
        .el-input__inner {
          background: transparent;
          border: none;
          padding: 0 6px 0 0;
          color: #888;
          height: 30px;
          text-align: center;
        }
        .el-input__icon {
          line-height: 30px;
        }
      }
      & /deep/ .elGroup .el-radio-button .el-radio-button__inner{
        border-right: none;
      }
      & /deep/ .elGroup .el-radio-button:last-child .el-radio-button__inner{
        border-right: 1px solid #949494;
      }
      & /deep/ .el-radio-button__inner{
        height: 32px;
        border-radius: 1px;
        border: 1px solid #949494;
        color: #FFF;
        box-shadow: none;
        transition: all 0s;
        background: transparent;
        outline: none;
        display: flex;
        align-items: center;
        padding: 4px 6px;
      }
      & /deep/ .is-active .el-radio-button__inner{
        background: #3889de;
      }
      .open-icon {
        position: absolute;
        right: 5px;
        top: 7px;
        font-size: 14px;
        color: #888;
        pointer-events: none;
      }
      .open {
        .open-icon {
          transform: rotate(180deg);
        }
      }
      .selectIcon {
        color: #fff;
      }
      .notSelect {
        font-weight: 800;
        border: 1px solid #254c79;
        margin-left: 6px;
        padding: 4px 10px;
        box-sizing: border-box;
        color: #888;
        background: #1a4673;
        cursor: pointer;
      }
      .isSelectSed {
        background: #3889de;
        color: #fff;
      }
      .isSelect /deep/ .invert {
        background: #3889de;
        color: #fff;
        .el-input__inner::placeholder {
          color: #fff;
        }
        .el-input__inner {
          color: #fff;
        }
      }
    }
    .satus_left {
      width: 100%;
      height: calc(100% - 40px);
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .imgBox{
        width: calc(50% - 3px);
        height: calc(86% - 3px);
        box-sizing: border-box;
        img{
          width: 100%;
          height: 100%;
          background-size: cover;
        }
      }
      .video{
        width: 100%;
        height: 100%;
        background-size: cover;
        outline: 0;
      }
      .rightCanvas{
        width: calc(50% - 3px);
        height: calc(100% - 3px);
        display: flex;
        align-items: center;
        .canvasBox{
          display: flex;
          justify-content: center;
          width: 100%;
          margin-top: 0px;
        }
      }
    }
    .satus_right {
      width: 100%;
      height: calc(100% - 40px);
      margin-top: 12px;
      .stbox{
        display: flex;
        justify-content: space-between;
        height: calc(100% - 60px);
      }
      .proment{
        width: 100%;
        button{
          background: #409EFf94;
          border-color: #409eff94;
          padding: 8px 8px;
          margin-bottom: 14px;
        }
        /deep/ .activeButton{
          background: #409EFF;
        }
      }
      .ProNow{
        width: 100%;
        height: calc(100% - 60px);
        padding: 20px;
        box-sizing: border-box;
        background: #FFF;
        overflow-y: auto;
        .promentNowTitle{
          font-size: 24px;
          margin-bottom: 14px;
        }
        .promentNowCen{
          font-size: 24px;
          margin: 14px 0;
        }
        .arroundTypeOne{
          width: 100%;
          min-height: 100px;
          background-size: cover;
          display: block;
          margin-top: 16px;
        }
      }

      & /deep/ .el-form-item{
        margin-bottom: 12px;
      }
      & /deep/ .el-input__inner{
        height: 32px;
        color: #FFF;
        border-radius: 4px;
        color: #333333;
        // border-image: linear-gradient(90deg, rgba(95, 101, 111, 0.93), rgba(151, 151, 151, 0)) 1 1;
        background: #F5F6F8;
      }
      & /deep/ .area .el-input__inner{
        padding: 0 0 0 10px;
        border-radius: 0;
      }
      
      .imgBox{
        width: calc(50% - 4px);
        height: calc(100% - 4px);
        box-sizing: border-box;
        position: relative;
        overflow-y: auto;
        .arroundImg{
          width: 100%;
          height: 100%;
          background-size: cover;
          display: block;
          & /deep/ .el-image__error{
            font-size: 20px;
          }
        }
        .el-icon-full-screen{
          position: absolute;
          z-index: 101;
          right: 10px;
          bottom: 10px;
          font-size: 24px;
          cursor: pointer;
          pointer-events: auto;
        }
      }
      .imgBox::-webkit-scrollbar {
        width: 6px;
        background-color: transparent;
      }
      .imgBox::-webkit-scrollbar-thumb{
        border-radius: 5px;
        width: 6px;
        background-color: #1b4e88;
      }
      .rightInfo{
        background: rgba(12, 36, 66, 0.8);
        width: calc(50% - 4px);
        height: calc(100% - 4px);
        padding: 10px 10px 10px 14px;
        box-sizing: border-box;
        color: #FFF;
        font-size: 16px;
        line-height: 22px;
      }
      
    }
  }
}
.sample{
  width: 180px;
  position: fixed;
  right: 30px;
  top: 140px;
  z-index: 99;
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.22);
  // border: 2px solid rgba(95, 101, 111, 0.9);
  color: #FFF;
  .sample-title, .sample-center{
    background: #FFF;
    color: #000;
    padding: 5px 0;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
  }
  .sample-box{
    width: 100%;
    display: flex;
    cursor: pointer;
    .box-left,.box-right{
      width: 50%;
      background: rgba(72, 106, 168, 0.8);
      font-weight: 500;
      text-align: center;
    }
    .box-left-active, .box-right-active, .box-center-active, .box-bottom-active{
      background: rgb(84, 140, 245);
    }
    .box-right-active{
      background: rgb(84, 140, 245);
    }
    .sample-left-name,.sample-right-name{
      line-height: 36px;
      font-weight: 550;
    }
    .sample-left-num,.sample-right-num{
      font-size: 20px;
      color: #dfc011;
      margin-right: 8px;
    }
  }
}
.example{
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #2e2d2d;
  backdrop-filter: blur(16px);
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, .22);
  border: 2px solid rgba(95, 101, 111, .9);
  z-index: 100;
  padding: 10px;
  width: 184px;
  height: 224px;
  box-sizing: border-box;
  color: #FFF;
  font-size: 16px;
  border-radius: 6px;
  .box{
    display: flex;
    align-items: center;
    text-align: left;
    line-height: 32px;
  }
  p{
    text-align: center;
    font-size: 24px;
    font-weight: 600;
  }
  .colorBox{
    width: 55px;
    height: 60px;
    // width: 20px;
    // height: 20px;
    // border-radius: 50%;
    // margin-right: 20px;
    // box-shadow: 0px 0px 4px 4px rgba(184, 179, 179, 0.75);
    text-align: center;
    // line-height: 18px;
    color: #000;
    // font-weight: 700;
    // font-size: 16px;
  }
  .colorRed{
    // background: rgb(255, 0, 0);
    background: url(../assets/img/popr.png) no-repeat;
    background-position: 0px;
    background-size: contain;
  }
  .colorGre{
    // background: rgb(0, 176, 80);
    background: url(../assets/img/poig.png) no-repeat;
    background-position: 0px;
    background-size: contain;
  }
  .colorYel{
    // background: rgb(255, 255, 0);
    background: url(../assets/img/poit.png) no-repeat;
    background-position: 0px;
    background-size: contain;
  }
}
.showReacts{
  position: fixed;
  top: 320px;
  left: 516px;
  z-index: 999;
}
.showReactTop{
  z-index: 999;
}
.showReactBot{
  z-index: -1;
}
</style>